swiper

What is swiper?

The swiper npm package is a modern touch slider with hardware accelerated transitions. It is intended for use in mobile websites, mobile web apps, and mobile native/hybrid apps. Swiper is designed to be used in a mobile environment, where touch interactions are fundamental. It provides a number of features like swiping, multiple slides per view, vertical slides, and more.

What are swiper's main functionalities?

Basic Swiper

This code initializes a basic Swiper instance with horizontal direction, loop mode, pagination, navigation arrows, and a scrollbar.

import Swiper from 'swiper';

const swiper = new Swiper('.swiper-container', {
  // Optional parameters
  direction: 'horizontal',
  loop: true,

  // If we need pagination
  pagination: {
    el: '.swiper-pagination',
  },

  // Navigation arrows
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },

  // And if we need scrollbar
  scrollbar: {
    el: '.swiper-scrollbar',
  },
});

Multiple Slides Per View

This code sets up a Swiper instance where you can have multiple slides visible at the same time, with space between the slides and clickable pagination.

import Swiper from 'swiper';

const swiper = new Swiper('.swiper-container', {
  slidesPerView: 3,
  spaceBetween: 30,
  pagination: {
    el: '.swiper-pagination',
    clickable: true,
  },
});

Vertical Swiper

This code snippet demonstrates how to initialize a Swiper instance that allows vertical swiping with clickable pagination.

import Swiper from 'swiper';

const swiper = new Swiper('.swiper-container', {
  direction: 'vertical',
  pagination: {
    el: '.swiper-pagination',
    clickable: true,
  },
});

Other packages similar to swiper

slick-carousel

Slick is a jQuery plugin for creating carousels that supports multiple slides, responsive layouts, and touch events. It is similar to Swiper but relies on jQuery, which might not be ideal for modern projects that do not use jQuery.

glidejs

Glide.js is a dependency-free JavaScript ES6 slider and carousel. It's lightweight, flexible and fast. Designed to slide, no less, no more. It compares to Swiper in terms of being touch-friendly and responsive, but it emphasizes simplicity and performance.

flickity

Flickity is a touch, responsive, flickable carousel library. It has features like draggable slides, group cells, and adaptive height. It is similar to Swiper but offers a different set of features and API options, focusing on being flickable and physics-based interactions.

owl-carousel

Owl Carousel is a touch-enabled jQuery plugin that lets you create a beautiful responsive carousel slider. While it offers similar functionality to Swiper, it is built on top of jQuery, which might not be suitable for projects that aim to avoid jQuery dependencies.

README

Swiper

Swiper - is the free and most modern mobile touch slider with hardware accelerated transitions and amazing native behavior. It is intended to be used in mobile websites, mobile web apps, and mobile native/hybrid apps. Designed mostly for iOS, but also works great on latest Android, Windows Phone 8 and modern Desktop browsers

Swiper is not compatible with all platforms, it is a modern touch slider which is focused only on modern apps/platforms to bring the best experience and simplicity.

Getting Started

• Getting Started Guide
• API
• Demos
• Forum

Dist / Build

On production use files (JS and CSS) only from dist/ folder, there will be the most stable versions, build/ folder is only for development purpose

Build

Swiper uses gulp to build a development (build) and dist versions.

First you need to have gulp-cli which you should install globally.

$ npm install --global gulp

Then install all dependencies, in repo's root:

$ npm install

And build development version of Swiper:

$ gulp build

The result is available in build/ folder.

Dist/Release

After you have made build:

$ gulp dist

Distributable version will available in dist/ folder.

Contributing

All changes should be committed to src/ files. Swiper uses LESS for CSS compliations, and concatenated JS files (look at gulpfile.js for concat files order)

Swiper 2.x.x

If you still using Swiper 2.x.x or you need old browsers support, you may find it in Swiper2 Branch

• Download Latest Swiper 2.7.6
• Source Files
• API

Changelog

3.4.2 - Released on March 10th, 2017

• Fixed an issue with lazy loading callbacks when swiper is destroyed
• New onAfterResize and onBeforeResize callbacks
• New onKeyPress callback when keyboard control is used
• Fixed Chrome+Windows issue with not clickable links that have "title" attribute
• Minor fixes